import homeLess from "./index.module.less";
import ArticleList from "@/components/articleList";
import LeftTab from "@/components/leftTab";
import SignIn from "@/components/signIn";
import ArticleBillboard from "@/components/articleBillboard";
import AuthorBillboard from "@/components/authorBillboard";
import Advertisement from "@/components/advertisement";
import CompanyInfo from "@/components/companyInfo";
import useScrollbar from "@/hooks/useScrollbar";
import { useState, useEffect } from "react";
import { GetMenuTabsApi } from "@/http/api/article";
import { useSelector, useDispatch } from "react-redux";
import { setMenu } from "@/store/modules/index";
export interface tabListType {
  Icon: string;
  Name: string;
  Path: string;
  Children: Array<any>;
}
function Home() {
  const dispatch = useDispatch();
  // 用于存储当前选中的父菜单路径
  const menu = useSelector((state: any) => state.index.menu);
  const [activeParent, setActiveParent] = useState<string | null>(null);
  const scrollbarStatus = useScrollbar().scrollDirection;
  const fixed = useScrollbar().fixed;
  const [tabList, setTabList] = useState([]);
  const getTablist = async () => {
    const res: any = await GetMenuTabsApi();
    console.log("获取菜单结果", res);
    setTabList(res.tabList);
  };
  useEffect(() => {
    getTablist();
  }, []);
  // 递归查找父菜单路径
  const findParentPath = (items: tabListType[], childPath: string) => {
    for (const item of items) {
      if (item.Children && item.Children.length > 0) {
        if (item.Children.some((child: any) => child.Path === childPath)) {
          setActiveParent(item.Path);
          break;
        }
        // 继续递归查找
        findParentPath(item.Children, childPath);
      }
    }
  };
  const childrenSelectMenu = (item: any) => {
    localStorage.setItem("menu", item.Path);
    dispatch(setMenu(item.Path));
    // 先重置父菜单状态
    setActiveParent(null);
    findParentPath(tabList, item.Path);
  };
  return (
    <div className={homeLess.content}>
      <div
        className={[
          "left_content",
          scrollbarStatus === "up" ? "" : "ToTop",
        ].join(" ")}
      >
        <LeftTab
          tabList={tabList}
          menu={menu}
          childrenSelectMenu={childrenSelectMenu}
        />
      </div>
      <div className="center_list_content">
        <ArticleList />
      </div>
      <div className="right_content">
        {fixed == "fixed" ? (
          <div
            className={[
              "fiexed_all",
              scrollbarStatus === "up" ? "bottom_To" : "",
            ].join(" ")}
          >
            <div className="top_center_article_billboard">
              <ArticleBillboard />
            </div>
            <div className="center_author">
              <AuthorBillboard />
            </div>
          </div>
        ) : (
          <div className="no_fiexed">
            <div className="top_sign_in">
              <SignIn />
            </div>
            <div className="top_center_article_billboard">
              <ArticleBillboard />
            </div>
            <div className="center_author">
              <AuthorBillboard />
            </div>
            <div className="center_center_Advertisement">
              <Advertisement />
            </div>
            <div className="bottom_info">
              <CompanyInfo />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default Home;
